<template>
    <div class="customercare_main">
        <!--        标题部分-->
        <el-row class="head">
            <el-col :span="24">
                <h1 class="contract_title">客户关怀</h1>
                <span class="" style="margin-left: 10px">/ 对企业中客户按期进行关怀服务</span>
            </el-col>
        </el-row >

        <!--        操作部分-->
        <el-row class="nav" style=" border-radius: 4px">
            <el-col>
                <div class="nav-item" @click="dialogFormVisible = true"><i class="iconfont icon-qianbi"></i> 新增</div>

                <router-link to="/careTypeManager"><div class="nav-item" ><i class="iconfont icon-m-weixinwenzhang"></i> 类型管理</div></router-link>

                <div class="nav-item2">
                    <download-excel :data="tableData" :fields="excelFields" name="关怀记录表.xls" type="xls">
                        <el-button type="text">
                            <i class="iconfont icon-excel"></i>Excel导出
                        </el-button>
                    </download-excel>
                </div>

                <el-form style="display:inline-block">
                    <div class="nav-item" style="border:none">
                        <el-input v-model="searchParam" clearable placeholder="请输入内容"></el-input>
                    </div>

                    <div style="display:inline-block">
                        <el-button  @click="searchK">搜索</el-button>
                    </div>
                </el-form>

            </el-col>
        </el-row>

        <!--        数据内容-->
        <div class="content" style=" border-radius: 4px">

            <el-tabs style="margin-bottom: 0px;height: 41px;" type="card" @tab-click="changeTab">
                <el-tab-pane label="全部" name="first"></el-tab-pane>

                <template v-for="types in CareTypeList">
                    <el-tab-pane :label="types.careTypeName" ></el-tab-pane>
                </template>
            </el-tabs>

            <el-table :data="tableData" style="width: 100%;min-height: 300px;margin-top: 0px" @cell-click="go_detail">

                <el-table-column prop="careRecId" type="selection" style="" header-align="center" align="center" ></el-table-column>

                <el-table-column prop="careRecId" label="编号" style=""></el-table-column>

                <el-table-column label="关怀主题" style="" >
                    <template slot-scope="scope">
                        <span style="cursor: pointer">{{scope.row.careTle}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="负责人" style="">
                    <template slot-scope="scope">
                        {{scope.row.emp.empName}}
                    </template>
                </el-table-column>

                <el-table-column label="客户" style="">
                    <template slot-scope="scope">
                        {{scope.row.customer.customerName}}
                    </template>
                </el-table-column>

                <el-table-column label="关怀类型" style="">
                    <template slot-scope="scope">
                        {{scope.row.careType.careTypeName}}
                    </template>
                </el-table-column>

                <el-table-column label="关怀内容" style="">
                    <template slot-scope="scope">
                        {{scope.row.careCon}}
                    </template>
                </el-table-column>

                <el-table-column label="关怀反馈" style="">
                    <template slot-scope="scope">
                        {{scope.row.cusBack}}
                    </template>
                </el-table-column>

                <el-table-column label="开始时间" width="150" style="">
                    <template slot-scope="scope">
                        <i class="el-icon-time"></i>  {{scope.row.beginTime | formatDate}}
                    </template>
                </el-table-column>

                <el-table-column label="备注" style="">
                    <template slot-scope="scope">
                        {{scope.row.remark}}
                    </template>
                </el-table-column>

                <el-table-column label="管理" style="width: 15%">
                    <template slot-scope="scope">
                        <el-button type="primary" icon="el-icon-edit" circle @click="editOne(scope.row)"></el-button>
                        <el-button type="danger" icon="el-icon-delete" circle @click="deteleOne(scope.row)"></el-button>
                    </template>
                </el-table-column>

            </el-table>

            <!--    分页-->
            <div class="pagePlug">
                <div class="block" style="margin-top:10px">
                    <el-pagination background layout="total, prev, pager, next"
                                   :total="totalSize"
                                   :page-size="pageSize"
                                   @current-change="changePage" >
                    </el-pagination>
                </div>
            </div>
        </div>

        <!--        新增弹窗  -->
        <el-dialog title="新建事件" :visible.sync="dialogFormVisible" width="50%">
            <el-form ref="form" :model="customerCare" label-width="80px" style="overflow: hidden" class="ncsText">

                <el-form-item label="对应客户">
                    <el-select v-model="customerCare.customer.customerId" value-key="customerId" placeholder="请选择客户" >
                        <el-option v-for="item in customerList"
                                   :key="item.customerId"
                                   :label="item.customerName"
                                   :value="item.customerId"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="关怀主题">
                    <el-input v-model="customerCare.careTle" style="width: 500px"></el-input>
                </el-form-item>

                <el-form-item label="关怀类型">
                    <el-select v-model="customerCare.careType.careTypeId" value-key="careTypeId" placeholder="请选择">

                        <el-option v-for="item in CareTypeList"
                                   :key="item.careTypeId"
                                   :label="item.careTypeName"
                                   :value="item.careTypeId"></el-option>

                    </el-select>
                </el-form-item>

                <el-form-item label="执行人">
                    <el-select v-model="customerCare.emp.empId" value-key="empId" placeholder="请选择客户" >
                        <el-option v-for="item in empList"
                                   :key="item.empId"
                                   :label="item.empName"
                                   :value="item.empId"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="关怀内容">
                    <el-input
                            v-model="customerCare.careCon"
                            type="textarea"
                            :autosize="{ minRows: 5, maxRows: 10}"
                            placeholder="请输入内容"
                            style="width: 500px">
                    </el-input>
                </el-form-item>

                <el-form-item label="客户反馈">
                    <el-input
                            v-model="customerCare.cusBack"
                            type="textarea"
                            :autosize="{ minRows: 5, maxRows: 10}"
                            placeholder="请输入内容"
                            style="width: 500px">
                    </el-input>
                </el-form-item>

                <el-form-item label="备注">
                    <el-input
                            v-model="customerCare.remark"
                            type="textarea"
                            :autosize="{ minRows: 3, maxRows: 10}"
                            placeholder="请输入内容"
                            style="width: 500px">
                    </el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="onSubmit(),dialogFormVisible = false">立即创建</el-button>
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                </el-form-item>
            </el-form>

        </el-dialog>

        <!--        查看内容弹窗-->
        <el-dialog title="文章内容" :visible.sync="dialogEssayVisble" width="60%">
            <div style="width:100%;min-height: 800px" >
                <sapn>{{dialogEssay.title}}</sapn>
                <hr/>
                <sapn>{{dialogEssay.essay}}</sapn>
                <hr/>
                <span>{{dialogEssay.auther}}</span>
                <hr/>
                <span>{{dialogEssay.time}}</span>
            </div>
        </el-dialog>


    </div>
</template>

<script>
    import {formatTimeToStr} from '@/assets/format.js'

    export default {
        name: "KnowledgeBase",
        data: function() {
            return {
                loading:true,
                searchParam:"",//搜索框内容
                kcName:"",//表头名字
                pageSize:5,//分页页大小
                currPage:1,//当前页码，默认为1
                totalSize:0,//总记录数
                tableData:[],
                textType:[
                    {
                        value: '选项1',
                        label: '销售话术'
                    },{
                        value: '选项2',
                        label: '行业分析'
                    },{
                        value: '选项3',
                        label: '对手分析'
                    },{
                        value: '选项4',
                        label: '企业文化'
                    }],
                dialogFormVisible: false,
                dialogEssayVisble: false,
                dialogEssay:{},
                customerCare: {
                    careRecId: 0,
                    careTle: '',
                    beginTime: '',
                    careCon: '',
                    cusBack: '',
                    remark: '',
                    careType: {careTypeId: 0, careTypeName: ''},
                    customer: {customerId: 0, customerName: ''},
                    emp: {empId: 0, empName: ''},
                    check:0
                },
                textarea2: '',
                detailData:{},
                customerList:{},//客户集合
                empList:{},
                CareTypeList:{},
                //Excel导出对应关系
                excelFields: {
                    "关怀记录编号": "careRecId",
                    "对应客户":"customer.customerName",
                    "关怀主题": "careTle",		//支持嵌套属性
                    "开始时间": "beginTime",
                    "关怀内容": "careCon",
                    "关怀类型": "careType.careTypeName",
                    "执行人": "emp.empName",
                    "客户反馈":"cusBack",
                    "备注":"remark",
                    "审批状态": {
                        field: "check",
                        callback: value => {
                            if(value==0){
                                return "未审批"
                            }else{
                                return "审批通过"
                            }
                        }
                    }
                }
            };
        },
        methods: {
            go_detail(row, column){
                if("关怀主题"==column.label){
                    //console.log(row);
                    this.detailData=row;
                    sessionStorage.setItem("customerCare", JSON.stringify(this.detailData));
                    this.$router.push({path:"/customercare-detail"});
                }
            },
            initData(currPage,pageSize,search,kcName){
                this.loading=true;
                this.$axios.get("api/after-sale/customer-care/care-list",{params:{page:currPage,size:pageSize,search:search,kcName:kcName}})
                    .then(v=>{
                        this.tableData = v.data.rows;
                        this.totalSize = v.data.total;
                        this.loading = false;
                    }).catch();
            },
            onSubmit(){
                this.$axios.post("api/after-sale/customer-care/add-care",this.customerCare).then(v=>{
                    this.initData(this.currPage,this.pageSize,this.searchParam,this.kcName);
                    this.dialogFormVisible = false;
                    this.customerCare={
                        careRecId: 0,
                        careTle: '',
                        beginTime: '',
                        careCon: '',
                        cusBack: '',
                        remark: '',
                        careType: {careTypeId: 0, careTypeName: ''},
                        customer: {customerId: 0, customerName: ''},
                        emp: {empId: 0, empName: ''},
                        check:0
                    }
                }).catch();
            },
            deteleOne(k){
                //alert(k.careRecId);
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios.post("api/after-sale/customer-care/delete-care",this.qs.stringify({crNo:k.careRecId}))
                        .then(v=>{
                            this.initData(this.currPage,this.pageSize,this.searchParam,this.kcName);
                        }).catch();
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            editOne(k){
                this.dialogFormVisible = true;
                this.customerCare={
                    careRecId: k.careRecId,
                    careTle: k.careTle,
                    beginTime: k.beginTime,
                    careCon: k.careCon,
                    cusBack: k.cusBack,
                    remark: k.remark,
                    careType: {careTypeId: k.careType.careTypeId, careTypeName: k.careType.careTypeName},
                    customer: {customerId: k.customer.customerId, customerName: k.customer.customerName},
                    emp: {empId: k.emp.empId, empName: k.emp.empName}
                }
            },
            searchK(){
                this.initData(1,this.pageSize,this.searchParam,this.kcName);
            },
            changeTab(tab){
                var KCname = tab.label;
                if (KCname=='全部'){
                    KCname ='';
                }
                this.kcName = KCname;
                this.initData(this.currPage,this.pageSize,this.searchParam,this.kcName);
            },
            changePage(val){
                //val就是当前页码
                this.initData(val,this.pageSize,this.searchParam,this.kcName);
            },
            initCusList(){
                this.$axios.get("api/customer/select_cus")
                    .then(v=>{
                        this.customerList = v.data;
                    }).catch();
            },
            initEmpList(){
                this.$axios.get("api/after-sale/customer-care/emp-list")
                    .then(v=>{
                        this.empList = v.data;
                    }).catch();
            },
            initCareType(){
                this.$axios.get("api/after-sale/customer-care/careTypeList")
                    .then(v=>{
                        this.CareTypeList = v.data;
                    }).catch();
            }
        },
        created(){
            this.initData(this.currPage,this.pageSize,this.searchParam,this.kcName);
            this.initCusList();
            this.initEmpList();
            this.initCareType();
        },
        filters: {
            formatDate: function(time) {
                if(time!=null&&time!="")
                {
                    var date = new Date(time);
                    return formatTimeToStr(date, "yyyy-MM-dd");
                }else{
                    return "";
                }
            }
        }
    };
</script>

<style scoped="scoped">
    *{margin: 0;padding: 0;font-size: 14px;}
    .customercare_main{background: #e4e7ee}
    .head{height:70px;background: #fcfbfd;line-height: 70px}
    .contract_title{display: inline-block;font-weight: unset;margin-left: 20px;font-size: 25px;}
    .el-col span{color: #b4b4bc}

    .nav{margin: 20px;background: #fcfbfd;width: 100%-40px;height: 55px;line-height: 55px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)}
    .nav .nav-item{color:#636e7b;display: inline-block;height:25px;padding: 0px 15px;border-right: 1px solid #dcdfe6;line-height: 25px;cursor: pointer}
    .nav-item2{color:#636e7b;display: inline-block;height:25px;padding: 0px 15px;line-height: 25px;cursor: pointer}
    .content{min-height:350px;margin: 20px;background: #fcfbfd;width: 100%-40px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)}
    /*分页*/
    .pagePlug{
        height: 50px;
        padding-top: 20px;
    }
    .active {
        background-color: rgb(67,149,255) !important;
    }

    /*操作按钮*/
    .el-table .el-button{width: 30px;height: 30px}
    .el-button.is-circle{padding: 2px !important;}

    /*    弹窗*/
    .NTtitle{
        width: 60px;
        height: 30px;
        text-align: center;
        line-height: 30px;
    }

</style>